<?php

?>
<script>
  $(document).ready(function(){
    $("#myList").sortable({placeholder:"ph",
                          handle:".handle",
                          change : function() {
                            var str = $("form").serialize();
                            alert(str);
                          }
                          });
  });
</script>
<form>
<ul id="myList">
  <li id="section_1">
    <h5>Section 1</h5>
    <span class="supSection" id="sup_section_1">-</span>
    <span class="handle handleHor"></span>
    <!--  multiple fieldsets -->
    <fieldset>
      <legend align="left">
        Champ 1
      </legend>
      <select name="data[section_1][champ_1][type]" id="section_1_type_1">
        <!-- txt (taille, type : mail, url, ...), checkbox, list, radio, file, select... -->
        <option value="1"><?php echo elgg_echo('referential:text:large'); ?></option>
        <option value="2"><?php echo elgg_echo('referential:text:small'); ?></option>
        <option value="3"><?php echo elgg_echo('referential:text:mail'); ?></option>
        <option value="4"><?php echo elgg_echo('referential:text:url'); ?></option>
        <option value="5"><?php echo elgg_echo('referential:checkbox'); ?></option>
        <option value="6"><?php echo elgg_echo('referential:list'); ?></option>
        <option value="7"><?php echo elgg_echo('referential:radio'); ?></option>
        <option value="8"><?php echo elgg_echo('referential:file'); ?></option>
        <option value="9"><?php echo elgg_echo('referential:select'); ?></option>
      </select>
      <label for="section_1_champ_1_simple">Simple</label><input type="radio" name="section_1_champ_1_radio" id="section_1_champ_1_simple">
      <label for="section_1_champ_1_multi">Multi</label><input type="radio" name="section_1_champ_1_radio" id="section_1_champ_1_multi">
      <span class="supField" id="sup_field_1">-</span>
    </fieldset>
    <fieldset>
      <legend align="left">
        Champ 2
      </legend>
      <select name="data[section_1][champ_2][type]" id="section_1_type_2">
        <!-- txt (taille, type : mail, url, ...), checkbox, list, radio, file, select... -->
        <option value="1"><?php echo elgg_echo('referential:text:large'); ?></option>
        <option value="2"><?php echo elgg_echo('referential:text:small'); ?></option>
        <option value="3"><?php echo elgg_echo('referential:text:mail'); ?></option>
        <option value="4"><?php echo elgg_echo('referential:text:url'); ?></option>
        <option value="5"><?php echo elgg_echo('referential:checkbox'); ?></option>
        <option value="6"><?php echo elgg_echo('referential:list'); ?></option>
        <option value="7"><?php echo elgg_echo('referential:radio'); ?></option>
        <option value="8"><?php echo elgg_echo('referential:file'); ?></option>
        <option value="9"><?php echo elgg_echo('referential:select'); ?></option>
      </select>
      <label for="section_1_field_1_simple">Simple</label><input type="radio" name="section_1_field_2_radio" id="section_1_field_1_simple">
      <label for="section_1_field_1_multi">Multi</label><input type="radio" name="section_1_field_2_radio" id="section_1_field_1_multi">
      <span class="supField" id="sup_field_1">-</span>
    </fieldset>
    <!--  end multiple fieldsets -->
    <span>Ajouter un Champ</span><span class="addField" id="add_field_1">+</span>
  </li>
  <li id="section_2"><h5>Section 2</h5><span class="supSection" id="sup_section_2">-</span></li>
  <li id="section_3"><h5>Section 3</h5><span class="supSection" id="sup_section_3">-</span></li>
  <li id="section_4"><h5>Section 4</h5><span class="supSection" id="sup_section_4">-</span></li>
</ul>
</form>
